<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 100%;"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));

  function getData(value) {
    return [{
      value: value,
      name: value,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#336c9c'
          }, {
            offset: 1,
            color: '#62cff1'
          }])
        }
      }
    }, {
      value: 63000 - value,
      //value: 70000 - value,
      itemStyle: {
        normal: {
          color: 'transparent'
        }
      }
    }];
  }

  placeHolderStyle = {
    normal: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      }


    }
  };
  option = {
    color: ['transparent', 'transparent', 'transparent', 'transparent', "transparent"],
    backgroundColor: '#0A0F23',
    tooltip: {
      trigger: 'item',
      formatter: "{a}:{b}件"
    },
    title: {
      text: '2017年全省专利申请情况',
      left: 'center',
      top: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 22
      }
    },
    legend: {
      top: "23%",
      left: "25%",
      align: "right",
      itemHeight: 10,
      data: ['发明专利申请', '实用新型专利申请', '外观设计专利申请'],
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      selectedMode: true,
      orient: "vertical",

    },
    grid: {
      top: '10%',
      left: '10%',
      bottom: '5%',
      right: '10%',
      containLabel: true
    },
    series: [{
      name: '发明专利申请',
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [90, 110],
      borderWidth: 5,
      center: ['50%', '55%'],
      itemStyle: placeHolderStyle,
      data: getData(46607)
    }, {
      name: '实用新型专利申请',
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [60, 80],
      borderWidth: 5,
      center: ['50%', '55%'],
      itemStyle: placeHolderStyle,
      data: getData(31595)
    }, {
      name: '外观设计专利申请',
      type: 'pie',
      clockWise: true, //顺时加载
      //startAngle: 210,
      hoverAnimation: false, //鼠标移入变大
      radius: [30, 50],
      borderWidth: 5,
      center: ['50%', '55%'],
      itemStyle: placeHolderStyle,
      data: getData(20733)
    }]
  };

  myChart.setOption(option);

</script>

</html>
